<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../lib/iconfont4/iconfont.css">
    <link rel="stylesheet" href="../css/carts.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/layer/layer.js"></script>
    <title>Document</title>
    <title>Document</title>

</head>

<body>
    <header>
        <div class="box_top">
            <div class="box_top1">
                <!-- 登录 注册部分 -->
                <ul class="top_ul1">
                    <li><span>10721746</span><span>位会员的选择</span></li>
                    <li class="user"></li>
                    <li class="hid"><a href="./login.html"> 登录</a></li>
                    <li class="hid"><a href="./reg.html"> 注册</a></li>
                    <li><a href="javascript:void(0)" class="quit">退出登录</a> </li>
                </ul>
                <!-- 签到等 右边部分 -->

                <ul class="top_ul2">
                    <li><a href="">会员俱乐部</a></li>
                    <li class="top_li1"><a href="">签到</a></li>
                    <li class="top_li2"><a href="">我的账户 </a>
                        <span></span>
                        <ul>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">我的存酒库</a></li>
                            <li><a href="#">我的优惠券</a></li>
                            <li><a href="#">我的收藏夹</a></li>
                        </ul>
                    </li>
                    <li class="top_li3"><a href="">手机版</a>
                        <div class="code_box">
                            <p class="p1">手机专享</p>
                            <div><img src="../images/logo/red-code.png" alt=""></div>
                            <div class="andrio_ios">
                                <p class="p2">下载也买酒客户端</p>
                                <p><a href="#"><img src="../images/logo/ios.png" alt=""></a></p>
                                <p><a href="#"><img src="../images/logo/android.png" alt=""></a></p>
                            </div>
                            <p class="p1"><a href="#">了解更多客户端优惠</a></p>
                        </div>
                    </li>
                    <li><a href="">设置勿扰</a></li>
                </ul>
            </div>
            <!-- 头部第二部分 -->
            <div class="box_top2">
                <span></span>
                <span></span>
            </div>

        </div>
    </header>
    <section>
        <table>
            <thead>
                <tr class="tr_line1">
                    <td colspan="7" class="row_1"><label for="express"><a href="#"><input type="radio" name="express"
                                    checked>
                                由也买酒配送</label></a> <span class="sm_num">0</span></td>
                </tr>
                <tr class="tr_line2">
                    <td class="row_1"><label for="all"><a href="#"><input type="checkbox" name="all"> 全选</a></label>
                    </td>
                    <td class="row_2">商品名称</td>
                    <td class="row_3">单价</td>
                    <td class="row_4">数量</td>
                    <td class="row_5">小计</td>
                    <td ></td>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <tr class="tr_line4">
                    <td class="row_1"><label for="all"><a href="#"><input type="checkbox" name="all"> 全选</a></label>
                    </td>
                    <td class="row_2">批量删除<span>批量加入收藏</span></td>
                    <td colspan="4"></td>
                </tr>
            </tfoot>

        </table>
        <div class="count">
            <ul>
                <li><span>商品件数: </span><span class="cout_all">0</span></li>
                <li><span>商品总价: ¥ </span><span class="all">0.0</span></li>
                <li><span>活动优惠: </span><span> ¥0.0</span></li>
                <li><span>优惠卷: </span><span> ¥0</span></li>
            </ul>
        </div>
        <div class="recommend">
            <ul>
                <li>
                    最佳搭配
                </li>
                <li>
                    浏览记录
                </li>
                <li>
                    我的收藏
                </li>
            </ul>
            <ul class="good_list">
                <li>
                    <a href="#"><img src="../images/partthree/one.jpg" alt=""></a>
                    <ul>
                        <li>冰酒袋</li>
                        <li>促销价:</li>
                        <li class="num_1">¥30.0</li>
                        <li class="num_2">1</li>
                        <li><a href="#">加入购物车</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><img src="../images/partthree/two.jpg" alt=""></a>
                    <ul>
                        <li>红木盒</li>
                        <li>促销价:</li>
                        <li class="num_1">¥58.0</li>
                        <li class="num_2">1</li>
                        <li><a href="#">加入购物车</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><img src="../images/partthree/three.JPG" alt=""></a>
                    <ul>
                        <li>双支礼盒</li>
                        <li>促销价:</li>
                        <li class="num_1">¥88.0</li>
                        <li class="num_2">1</li>
                        <li><a href="#">加入购物车</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><img src="../images/partthree/four.JPG" alt=""></a>
                    <ul>
                        <li>松木盒</li>
                        <li>促销价:</li>
                        <li class="num_1">¥38.0</li>
                        <li class="num_2">1</li>
                        <li><a href="#">加入购物车</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><img src="../images/partthree/one.jpg" alt=""></a>
                    <ul>
                        <li>冰酒袋</li>
                        <li>促销价:</li>
                        <li class="num_1">¥30.0</li>
                        <li class="num_2">1</li>
                        <li><a href="#">加入购物车</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><img src="../images/partthree/two.jpg" alt=""></a>
                    <ul>
                        <li>红木盒</li>
                        <li>促销价:</li>
                        <li class="num_1">¥58.0</li>
                        <li class="num_2">1</li>
                        <li><a href="#">加入购物车</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><img src="../images/partthree/three.JPG" alt=""></a>
                    <ul>
                        <li>双支礼盒</li>
                        <li>促销价:</li>
                        <li class="num_1">¥88.0</li>
                        <li class="num_2">1</li>
                        <li><a href="#">加入购物车</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><img src="../images/partthree/four.JPG" alt=""></a>
                    <ul>
                        <li>松木盒</li>
                        <li>促销价:</li>
                        <li class="num_1">¥38.0</li>
                        <li class="num_2">1</li>
                        <li><a href="#">加入购物车</a></li>
                    </ul>
                </li>
        </div>
        <div class="fixed_btm">
            <div>
                <span>商品数量:</span>
                <span style="color:rgb(211, 47, 47);font_size:14px;font-weight: bold" class="zahl_btm">0</span>
                <span>件</span>
                <span style="padding-left:20px">应付金额</span>
                <span>(不含运费)</span>
                <span style="color: rgb(211, 47, 47)">¥</span>
                <span style="font-size: 24px;color: rgb(211, 47, 47);font-weight:bold" class="geld_btm">0</span>
                <button>去结算</button>
            </div>
        </div>
    </section>
    <!-- 脚部内容 -->
    <footer>
        <div class="fotbox">
            <div class="firstline">
                <span class="one bgc">消费者最喜爱的网站TOP100 </span>
                <span class="line">|</span>
                <span class="two bgc">仅限18周岁以上人士购买</span>
                <span class="line">|</span>
                <span class="three bgc"><a href="#">网络社会征信网</a></span>
                <span class="line">|</span>
                <span class="four bgc">上海工商</span>
                <span class="line">|</span>
                <span>京公网安备11010502013828</span>
            </div>
            <div class="secondLine"><span>Copyright 2006-2015 也买酒 yesmywine.com 版权所有</span><span>|</span>
                <span>沪ICP备17040012号-1</span></div>
            <div class="thirdline"><a href="#"> <img src="../images/login/cert.png" alt=""> <img
                        src="../images/login/jiujiao.jpg" alt=""></a></div>
            <div><a href="#"> <img src="../images/login/link.jpg" alt=""></a></div>
        </div>
    </footer>
</body>

</html>
<script>
    $(function () {
        var oUser = document.querySelector('.user')
        $.ajax({
            url: '../../sever/isLogin.php',
            dataType: "json"
        }).then(function (res) {
            if (res.status == true) {
                let userData = JSON.parse(localStorage.getItem("user"));
                oUser.innerText = "Hi, " + userData.u_name;
                $(".quit").show();
                $('.hid').hide();
            } else {
                window.location = "./login.html"
            }
        })
    })
    $(".quit").on("click", function () {
        $.ajax({
            url: "../../sever/exitLogin.php"
        }).then(function () {
            window.location = "./login.html"
        })
    })
    let globalObj = {};
    $(function () {
        $.ajax({
            url: "../../sever/cartslist.php",
            dataType: "json"
        }).then(function (res) {
            let { msg, status, data } = res;
            globalObj = data;
            loadData(data);
        })

    })
    var geld = 0;
    var zahl = 0;

    function loadData(data) { //data [{a:xx,b:xx,c:xx},{a:xx,b:xx,c:xx},{a:xx,b:xx,c:xx}]
        console.log(data);

        $.each(data, function (index, obj) {
            var str = ``;
            str += `<tr class="tr_line3" data-tmpindex=${index}>`;
            str += ` <td class="row_1"><label for="kong"><input type="checkbox" name="kong"></label></td>`;
            str += `<td class="row_2"><a href="./goodsDetail.html"><img src="${obj.g_url}" alt="">
                <span class="name_goods">${obj.g_name.substr(0, 10).padEnd(".")}</span></a></td>`;
            str += ` <td class="row_3">¥<span>${obj.g_preis}</span></td>`;
            str += ` <td class="row_4 numb"><button class="btn1"></button><input value="${obj.g_num}"> <button class="btn2"></button> </td>`;
            str += ` <td class="row_5">¥<span>${obj.g_total}</span></td>`;
            str += `  <td class="row_6"><span>加入收藏夹</span><a href="#" class="del">删除</a></td>`;
            str += ` </tr>`;
            $("tbody").append(str)
            var i = parseInt(`${obj.g_num}`)
            zahl += i
            $(".cout_all").text(zahl)
            $(".sm_num").text(zahl)

            var m = parseInt(`${obj.g_total}`)
            geld += m
            $(".all").text(geld)
            //  固定条价格和数量
            $(".zahl_btm").text(zahl)

            $(".geld_btm").text(geld)

        });
    }

    // input输入值
    $(function () {
        $("table").on("input", ".row_4 input", function () {
            var summ = 0
            var minu = 0
            var x = $(this).val() * $(this).parents("td").prev().find("span").text()

            $(this).parents("td").next().find("span").text(x);

            //总金额数  表格

            $(".row_5 span").each((index, el) => {
                summ += parseInt($(el).text());
                $(".all").text(summ)
            //  固定条价格和数量
            $(".geld_btm").text(summ)  





            });
            $(".row_4 input").each((index, el) => {

                minu += parseInt($(el).val())

                $(".cout_all").text(minu)  
            //  固定条价格和数量
                $(".zahl_btm").text(minu)
            $(".sm_num").text(minu)


            })

            var price = $(this).parents("td").prev().find("span").text();



        })


    })
    // 减
    $(function () {
        $("table").on("click", ".btn1", function () {
            var num = $(this).parents("td").find("input").val();
            if (num == 1) {
                return;
            }
            $(this).parents("td").find("input").val(--num);
            var price = $(this).parents("td").prev().find("span").text();
            $(this).parents("td").next().find("span").text(num * price);
            //减法不会出现字符串拼接   不一定要把所有的数相加  可以总数减 变化的数
            $(".cout_all").text($(".cout_all").text() - 1)

            $(".all").text($(".all").text() - price);
            //  固定条价格和数量
            $(".zahl_btm").text($(".cout_all").text())

            $(".geld_btm").text($(".all").text())
            $(".sm_num").text($(".cout_all").text())

            

            var sigObj = globalObj[$(this).parents("tr").data("tmpindex")];
            var updateObj = { cid: sigObj.c_id, num }
            $.ajax({
                url: "../../sever/updateCa.php",
                data: updateObj,
                type: "post",
                dataType: "json"
            }).done(function (res) {
                console.log(res);
            })
        })
    })
    // 增
    $(function () {
        $("table").on("click", ".btn2", function () {
            var num = $(this).parents("td").find("input").val();

            $(this).parents("td").find("input").val(++num);
            var price = $(this).parents("td").prev().find("span").text();
            $(this).parents("td").next().find("span").text(num * price);
            //减法不会出现字符串拼接   不一定要把所有的数相加  可以总数减 变化的数
            $(".cout_all").text($(".cout_all").text() * 1 + 1)

            $(".all").text($(".all").text() * 1 + price * 1);
            //  固定条价格和数量
            $(".zahl_btm").text($(".cout_all").text())

            $(".geld_btm").text($(".all").text())

            $(".sm_num").text($(".cout_all").text())


            var sigObj = globalObj[$(this).parents("tr").data("tmpindex")];
            var updateObj = { cid: sigObj.c_id, num }
            $.ajax({
                url: "../../sever/updateCa.php",
                data: updateObj,
                type: "post",
                dataType: "json"
            }).done(function (res) {
                console.log(res);
            })
        })
    })

    // 删
    $("table").on("click", ".del", function () {

        var num = $(this).parents("td").prev().prev().find("input").val();
        var preis = $(this).parents("td").prev().find("span").text();

        var sigObj = globalObj[$(this).parents("tr").data("tmpindex")];
        var self = this;
        layer.confirm("确定是否删除", {
            icon: 3,
            btn: ["ja", "nein"]
        }, function (index) {

            $(".cout_all").text($(".cout_all").text() * 1 - num)

            $(".all").text($(".all").text() * 1 - preis)

            //  固定条价格和数量
            $(".zahl_btm").text($(".cout_all").text())

            $(".geld_btm").text($(".all").text())

            $(".sm_num").text($(".cout_all").text())


            $.ajax({
                url: "../../sever/removeCa.php",
                data: {
                    cid: sigObj.c_id
                },
                dataType: "json",
                type: "post"
            }).then(function (res) {
                if (res.status == 1) {
                    layer.msg("删除成功");
                    $(self).parents("tr").remove();
                }
                else {
                    layer.msg("删除失败")
                }
                // 关闭对话框
                layer.close();
            }, function () {
                alert("请求失败了  玩个scheisse")
            })
        }
        )

    })

</script>